<template>
  <el-dialog
    class="dialog"
    :title="isMake?'消费单样式':'制作单样式'"
    :visible.sync="dialogTableVisible"
    append-to-body
    width="70%"
  >
    <div :class="['make_order', isMake == true ? 'make_order2' : '']">
      <div class="style_list">
        <div class="lager_title">火锅店（禅城）</div>
        <div class="md_title">
          {{ isMake == true ? "结账单-堂食-已结" : "制作单-堂食" }}
        </div>
        <div class="tab_header">
          <div>桌号：16</div>
          <div>人数：1</div>
        </div>
        <div class="list">
          <div>
            <div>商品名称</div>
            <div>三彩无骨鱼</div>
          </div>
          <div v-if="isMake == false">
            <div>规格</div>
            <div>500G/微辣/草鱼</div>
          </div>
          <div>
            <div>数量</div>
            <div>1.0</div>
          </div>
          <div v-if="isMake == false">
            <div>价格</div>
            <div>18</div>
          </div>
          <div>
            <div>小计</div>
            <div>18</div>
          </div>
        </div>
        <div class="remark">备注：</div>
        <div class="free">赠品：350ml可口可乐1份</div>
        <div v-if="isMake == true" class="free no_b-top">
          <div>积分优惠 积分抵扣</div>
          <div>-10</div>
        </div>
        <div v-if="isMake == true" class="free no_b-top">
          <div>消费合计</div>
          <div>10</div>
        </div>
        <div v-if="isMake == true" class="qr_code btm_boder">
          <div class="img" />
          <div class="title">扫一扫开发票</div>
        </div>
        <div class="time">打印时间：2022-02-13 12:32</div>
        <div v-if="isMake == true" class="time">
          联系地址：佛山市禅城区祖庙街道城央大厦1101
        </div>
        <div v-if="isMake == true" class="time">联系电话：020-66139696</div>
      </div>
      <div class="style_list">
        <div class="lager_title">火锅店（禅城）</div>
        <div class="md_title">
          <div>{{ isMake == true ? "结账单-打包-已结" : "制作单-打包" }}</div>
          <div v-if="isMake == false">取单号：1110</div>
        </div>
        <div class="tab_header">
          <div>桌号：16</div>
          <div>人数：1</div>
        </div>
        <div class="list">
          <div>
            <div>商品名称</div>
            <div>三彩无骨鱼</div>
          </div>
          <div v-if="isMake == false">
            <div>规格</div>
            <div>500G/微辣/草鱼</div>
          </div>
          <div>
            <div>数量</div>
            <div>1.0</div>
          </div>
          <div v-if="isMake == false">
            <div>价格</div>
            <div>18</div>
          </div>
          <div>
            <div>小计</div>
            <div>18</div>
          </div>
        </div>
        <div class="remark">备注：</div>
        <div class="free">赠品：350ml可口可乐1份</div>
        <div v-if="isMake == true" class="free no_b-top">
          <div>积分优惠 积分抵扣</div>
          <div>-10</div>
        </div>
        <div v-if="isMake == true" class="free no_b-top">
          <div>消费合计</div>
          <div>10</div>
        </div>
        <div v-if="isMake == true" class="qr_code btm_boder">
          <div class="img" />
          <div class="title">扫一扫开发票</div>
        </div>
        <div class="time">打印时间：2022-02-13 12:32</div>
        <div v-if="isMake == true" class="time">
          联系地址：佛山市禅城区祖庙街道城央大厦1101
        </div>
        <div v-if="isMake == true" class="time">联系电话：020-66139696</div>
      </div>
      <div class="style_list">
        <div class="lager_title">火锅店（禅城）</div>
        <div class="md_title">
          <div>{{ isMake == true ? "结账单-同城配送-已结" : "制作单-同城配送" }}</div>
        </div>
        <div class="md_title">
          <div>预约送达：12-29 14:30</div>
        </div>
         <div class="md_title" v-if="isMake == true">
          <div>配送信息：文华北路181号城阳大厦1101云启点 张小泉 13054458888</div>
        </div>
        <div class="list">
          <div>
            <div>商品名称</div>
            <div>三彩无骨鱼</div>
          </div>
          <div v-if="isMake == false">
            <div>规格</div>
            <div>500G/微辣/草鱼</div>
          </div>
          <div>
            <div>数量</div>
            <div>1.0</div>
            <!-- <div v-if="isMake == true">1.0</div> -->
          </div>
          <div v-if="isMake == false">
            <div>价格</div>
            <div>18</div>
            <!-- <div v-if="isMake == true">2</div> -->
          </div>
          <div>
            <div>小计</div>
            <div>18</div>
            <!-- <div v-if="isMake == true">2</div> -->
          </div>
        </div>
        <div class="remark">备注：</div>
        <div class="free">赠品：350ml可口可乐1份</div>
        <div v-if="isMake == true" class="free no_b-top">
          <div>积分优惠 积分抵扣</div>
          <div>-10</div>
        </div>
        <div v-if="isMake == true" class="free no_b-top">
          <div>消费合计</div>
          <div>10</div>
        </div>
        <div v-if="isMake == true" class="qr_code btm_boder">
          <div class="img" />
          <div class="title">扫一扫开发票</div>
        </div>
        <div class="time">打印时间：2022-02-13 12:32</div>
        <div v-if="isMake == true" class="time">
          联系地址：佛山市禅城区祖庙街道城央大厦1101
        </div>
        <div v-if="isMake == true" class="time">联系电话：020-66139696</div>
      </div>
    </div>

    <div class="make_fooder">
      <div>堂食{{isMake?'消费':'制作'}}单样式</div>
      <div>打包{{isMake?'消费':'制作'}}单样式</div>
      <div>同城配送{{isMake?'消费':'制作'}}单样式</div>
    </div>
  </el-dialog>
</template>
<script>
export default {
  props: ["value"],
  data() {
    return {
      dialogTableVisible: false,
      isMake: false,
    };
  },
  mounted() {},
  methods: {
    openDialog(type) {
      this.isMake = type != 1;
      this.dialogTableVisible = true;
    },
  },
};
</script>
<style scoped lang="scss">
.dialog {
  /deep/.el-dialog__body {
    background: #808080;
    .make_fooder {
      display: flex;
      justify-content: space-between;
      div {
        text-align: center;
        width: calc(100% / 3 - 60px);
        margin: 30px 0 10px;
        font-size: 18px;
        font-weight: bold;
        color: #050505;
      }
    }
    .btm_boder {
      border-bottom: #eee dashed 2px;
    }
    .make_order {
      display: flex;
      justify-content: space-between;
      .style_list {
        width: calc(100% / 3 - 60px);
        max-width: 330px;
        background-color: #fff;
        padding: 10px 15px 50px;
        .lager_title {
          text-align: center;
          margin-bottom: 20px;
        }
        .md_title {
          margin-bottom: 15px;
          font-weight: bold;
          display: flex;
          justify-content: space-between;
        }
        .md_title2 {
          display: flex;
          justify-content: space-between;
        }
        .tab_header {
          display: flex;
          justify-content: space-between;
          padding: 10px 0;
          border: #eee dashed 2px;
          border-left: none;
          border-right: none;
          margin-bottom: 10px;
          font-weight: bold;
        }
        .list {
          display: flex;
          justify-content: space-between;
          > div:not(:first-child) {
            text-align: center;
          }
          div > div {
            margin-bottom: 10px;
          }
        }

        .remark {
          margin-bottom: 10px;
        }
        .free {
          display: flex;
          padding: 10px 0;
          border: #eee dashed 2px;
          border-left: none;
          border-right: none;
          // margin-bottom: 10px;
        }
        .time {
          margin-top: 10px;
        }
        .no_b-top {
          border-top: none;
          display: flex;
          justify-content: space-between;
        }
        .qr_code {
          display: flex;
          flex-direction: column;
          padding: 30px 0 10px;
          align-items: center;
          .img {
            width: 100px;
            height: 100px;
            background: #eee;
          }
          .title {
            font-size: 12px;
            color: #808080;
            margin-top: 15px;
          }
        }
      }
    }
    .make_order2 {
      .list {
        > li {
          display: flex;
          justify-content: space-between;
          //   :nth-child(2) {
          //     text-align: center;
          //   }
          //   div {
          //     width:auto important;
          //     margin-bottom: 10px;
          //   }
          //   :last-child {
          //     width: auto !important;;
          //     text-align: center;
          //   }
        }
      }
    }
  }
}
</style>
